<template>
	<view class="balance">
		<view class="nav">
			<view :class="!active?'active':'left'" @click="swichClick(0)">
				充值记录
			</view>
			<view :class="active?'active':'right'" @click="swichClick(1)">
				消费记录
			</view>
		</view>
		
		<view style="padding: 0 22rpx;">
			<view class="list" v-for="(item,index) in list" :key="index" @click="toOrderDetail()">
				<view style="display: flex;justify-content: space-between;padding-bottom: 8rpx;border-bottom: 1px dashed rgb(204, 204, 204);">
					<view>{{item.order}}</view>
					<view style="color: rgb(62, 86, 186);">{{item.number}}</view>
				</view>
				<view style="padding-top: 8rpx;text-align: right;color: rgb(183, 183, 183);">{{item.date}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active:0,
				list:[
					{
						order:'订单编号',
						number:'-139',
						date:'2023-3-21'
					},
					{
						order:'订单编号',
						number:'-139',
						date:'2023-3-21'
					},
					{
						order:'订单编号',
						number:'-139',
						date:'2023-3-21'
					},
					{
						order:'订单编号',
						number:'-139',
						date:'2023-3-21'
					},
					{
						order:'订单编号',
						number:'-139',
						date:'2023-3-21'
					}
				]
			};
		},
		methods:{
			swichClick(i) {
				this.active = i
				//调接口和获取列表数据
			}
		},
		onReachBottom() {
			console.log('触底加载');
		}
	}
</script>

<style lang="scss" scoped>
.balance{
	.nav {
		display: flex;
		align-items: center;
		font-size: 32rpx;
		// height: 130rpx;
		background: rgb(255, 255, 255);
		box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
		border-top: 1px solid rgb(230, 230, 230);
		
		.active{
			width: 50%;
			height: 130rpx;
			line-height: 130rpx;
			text-align: center;
			border-right: 1px solid rgb(230, 230, 230);
			color: #000;
			font-size: 700;
			border-bottom: 2px solid #3E51B7;
		}
		
		.left {
			width: 50%;
			height: 130rpx;
			line-height: 130rpx;
			color: #858585;
			text-align: center;
			border-right: 1px solid rgb(230, 230, 230);
		}
	
		.right {
			width: 50%;
			height: 130rpx;
			line-height: 130rpx;
			color: #858585;
			text-align: center;
		}
	}
	.list {
		background-color: #fff;
		border-radius:8rpx;
		padding: 16rpx 24rpx;
		margin-top: 24rpx;
		box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
	}
	
}
</style>
